<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="600" style="border: 1px solid"></canvas>
		<script>
			window.onload = function(){
				var canvas = document.getElementById("canvas")
				var cxt = canvas.getContext("2d")
				//三角形aej
				cxt.moveTo(100,100)
				cxt.lineTo(500,100)
				cxt.lineTo(300,300)
				cxt.lineTo(100,100)				
				cxt.fillStyle = "rgb(204,232,148)"
				cxt.fill()
				cxt.stroke()
				
				
				//三角形abe
				cxt.beginPath()
				cxt.moveTo(100,100)
				cxt.lineTo(100,500)
				cxt.lineTo(300,300)
				cxt.lineTo(100,100)
				cxt.fillStyle = "rgb(106,193,212)"
				cxt.fill()
				cxt.stroke()
				
				//三角形bcd
				cxt.beginPath()
				cxt.moveTo(100,500)
				cxt.lineTo(300,500)
				cxt.lineTo(200,400)
				cxt.lineTo(100,500)
				cxt.fillStyle = "rgb(243,149,201)"
				cxt.fill()
				cxt.stroke()
				
				//正方形cdfe
				cxt.beginPath()
				cxt.moveTo(300,300)
				cxt.lineTo(200,400)
				cxt.lineTo(300,500)
				cxt.lineTo(400,400)
				cxt.lineTo(300,300)
				cxt.fillStyle = "rgb(167,150,194)"
				cxt.fill()
				cxt.stroke()
				
				//三角形efg
				cxt.beginPath()
				cxt.moveTo(300,300)
				cxt.lineTo(400,200)
				cxt.lineTo(400,400)
				cxt.lineTo(300,300)
				cxt.fillStyle = "rgb(250,242,37)"
				cxt.fill()
				cxt.stroke()
				
				//平行四边形gfij
				cxt.beginPath()
				cxt.moveTo(500,100)
				cxt.lineTo(500,300)
				cxt.lineTo(400,400)
				cxt.lineTo(400,200)
				cxt.lineTo(500,100)
				cxt.fillStyle = "rgb(240,62,98)"
				cxt.fill()
				cxt.stroke()
				
				//三角形dhi
				cxt.beginPath()
				cxt.moveTo(500,300)
				cxt.lineTo(500,500)
				cxt.lineTo(300,500)
				cxt.lineTo(500,300)
				cxt.fillStyle = "rgb(249,203,45)"
				cxt.fill()
				cxt.stroke()
			}
		</script>
	</body>
</html>
